<html>
    <head>
        <meta charset="utf-8">
        <title>天气预报</title>
        <script src="jquery.js"></script>
        <style>
            body{
                margin: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(to bottom,rgb(15,105,205),rgb(100,170,240));
                background-repeat: no-repeat;
                background-color: rgb(100,170,240);
                text-align: center;
                color: white;
                /*字体阴影*/
                text-shadow: 2px 2px 2px black;
            }
            header{
                margin-top: 20px;
                font-size: 25px;
            }
            main .pic{
                height: 128px;
                background-image: url("days/duoyun.png");
                background-repeat: no-repeat;
                background-position: center;
                margin: 30px;
            }
            main .temperature{
                font-size: 35px;
                /*字体类型*/
                font-family: Arial;
            }
            main .wind{
                font-size: 14px;
                line-height: 200%;
            }
            main .current{
                font-size: 14px;
                line-height: 170%;
            }
            
            section{
                width: 33.33333%;
                margin-top: 30px;
                float: left;
                border-right: solid 2px purple;
                /*设置边框的添加方向*/
                box-sizing: border-box;
                margin-bottom: 20px;
            }
            
            section:nth-child(3){
                border-right: 0;
            }
            
            section .pic{
                height: 64px;
                background-image: url("days/duoyun.png");
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                margin: 20px;
                opacity: 0.8;
            }

        </style>
    </head>
    <body>
        <header>洛杉矶</header>
        <main>
            <div class="pic"></div>
            <div class="temperature">7 ~ 0<sup>℃</sup></div>
            <div class="weather">多云</div>
            <div class="wind">东北风3-4级</div>
            <div class="current">实时温度：5℃,空气指数 57 良</div>
        </main>
        <footer>
            <section>
                <div class="week">周四</div>
                <div class="pic"></div>
                <div class="temperature">9~0℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
            <section>
                <div class="week">周四</div>
                <div class="pic"></div>
                <div class="temperature">9~0℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
            <section>
                <div class="week">周四</div>
                <div class="pic"></div>
                <div class="temperature">9~0℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
        </footer>
    </body>
    <script>
        $.getJSON("http://api.map.baidu.com/telematics/v3/weather?location=郑州市&output=json&ak=ck6oSxPYCgGLYKc17YZXanOC&callback=?",function(data){
            //alert(JSON.stringify(data));
            //城市名字
            var results = data.results;
            var r = results[0];
            var city = r.currentCity;
            $("header").text(city);
            
            //今天天气图片
            var days = r.weather_data;
            var today = days[0];
            var picurl = today.dayPictureUrl;
            var pic = picurl.substr(picurl.lastIndexOf("/"));
            //alert(pic);
            $("main .pic").css("background-image","url(days"+pic+")");
            
            //今天天气
            $("main .temperature").text(today.temperature);
            $("main .wind").text(today.wind);
            $("main .weather").text(today.weather);
            var current = today.date.substr(today.date.lastIndexOf("："),3);
            
            var air;
            if(r.pm25 <=50){
                air = "优";
            }else if(r.pm25 <=100){
                air = "良";
            }else if(r.pm25 <=150){
                air = "轻微污染";
            }else if(r.pm25 <=200){
                air = "轻度污染";
            }else{
                air = "严重污染";
            }
            $("main .current").text("实时温度"+current+",空气指数："+r.pm25+" "+air);
            
            //今后三天
            var sections = $("section");
            
            for (var i = 0;i <sections.length;i++){
                var day = days[i+1];
                var sec = sections[i];
                $(".week",sec).text(day.date);
                var picurl = day.dayPictureUrl;
                var pic = picurl.substr(picurl.lastIndexOf("/"));
                $(".pic",sec).css("background-image","url(days"+pic+")");
                $(".temperature",sec).text(day.temperature);
                $(".weather",sec).text(day.weather);
                $(".wind",sec).text(day.wind);
            }
        });
    </script>
</html>